<d-data-table
  [dataSource]="basicDataSource"
  [tableWidthConfig]="tableWidthConfig"
  [scrollable]="true"
  dDroppable
  [switchWhileCrossEdge]="true"
  [dropScope]="'mutiple-group'"
  (dropEvent)="onDrop($event)"
>
  <thead dTableHead>
    <tr dTableRow>
      <th dHeadCell></th>
      <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
    </tr>
  </thead>
  <tbody dTableBody dSortable>
    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
      <tr
        dTableRow
        dDraggable
        [dragFollowOptions]="{ appendToBody: true }"
        [batchDragStyle]="['badge']"
        [dragScope]="'mutiple-group'"
        [dragHandle]="'.table-drag-row-handle, .table-drag-row-handle *'"
        [dragData]="rowItem"
        [enableDragFollow]="true"
        (click)="batchSelectCheck($event, rowItem)"
        batchDrag
        [batchDragActive]="rowItem.isSelected"
        (batchDragActiveEvent)="batchSelect(rowItem)"
        [ngClass]="{ selected: rowItem.isSelected }"
      >
        <td dTableCell class="table-drag-row-handle">
          <div class="icon-drag-small"></div>
        </td>
        <td dTableCell *ngFor="let colOption of dataTableOptions.columns">
          {{ colOption.fieldType === 'date' ? (rowItem[colOption.field] | i18nDate: 'short':false) : rowItem[colOption.field] }}
        </td>
      </tr>
    </ng-template>
  </tbody>
</d-data-table>
